<template>
  <div class="page">
    <div class="van-nav-head">
      <van-nav-bar title="商品详情" left-arrow @click-left="$router.go(-1)" :fixed="true"/>
    </div>
    <!--    商品基本信息-->
    <div class="goods-basic">
      <van-swipe @change="onSwiperChange" class="my-swipe" :autoplay="3000" indicator-color="white">
        <template v-for="item in goods.images">
          <van-swipe-item>
            <van-image :src="item" width="100vw" height="100vw"></van-image>
          </van-swipe-item>
        </template>
        <template #indicator>
          <div class="custom-indicator">
            {{ current + 1 }}/{{ goods.images.length }}
          </div>
        </template>
      </van-swipe>

      <div class="module-wrap padding-sm">
        <div class="real-price text-red text-f22 text-price padding-bottom-xs">68-110</div>
        <div class="text-gray text-f12 padding-bottom-xs">价格：<span class="text-through">￥299</span></div>
        <div class="text-f16 padding-bottom-xs">男士外套2020春秋季新款立领夹克韩版潮流帅气学生百搭休闲上衣服</div>
        <div class="flex text-999 text-f12 padding-top-xs">
          <p class="flex-sub text-left">快递: 免运费</p>
          <p class="flex-sub text-center">月销量 152件</p>
          <p class="flex-sub text-right">四川 成都</p>
        </div>
      </div>
    </div>

    <!--    商品详情-->
    <div class="goods-info margin-top padding-sm bg-white">
      <div class="goods-parameter__title">商品详情</div>
      <div class="text-f0">
        <template v-for="item in goods.images">
          <van-image :src="item" width="100%"></van-image>
        </template>
      </div>
    </div>

    <!--    商品导航-->
    <div class="goods-bottom">
      <van-goods-action>
        <van-goods-action-icon @click="$router.push('/')" icon="home-o" text="首页"/>
        <van-goods-action-icon icon="chat-o" text="客服" dot/>
        <van-goods-action-icon icon="cart-o" text="购物车" badge="5"/>
        <van-goods-action-button type="warning" text="加入购物车"/>
        <van-goods-action-button @click="skuShow = true" type="danger" text="立即购买"/>
      </van-goods-action>
    </div>
    <!--    选择规格-->
    <van-sku
        v-model="skuShow"
        :sku="sku"
        :goods="goods"
        :hide-stock="sku.hide_stock"
        @buy-clicked="onBuyClicked"
    />
  </div>
</template>

<script type="es6">
export default {
  inject: ['reload'], /**reload(callback);对应provide中的数组值*/
  name: "goods",
  data() {
    return {
      skuShow: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '颜色', // skuKeyName：规格类目名称
            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: '1', // skuValueId：规格值 id
                name: '浅蓝色', // skuValueName：规格值名称
                imgUrl: 'http://img.alicdn.com/imgextra/i3/3105837296/O1CN01u8yKcG23lcHFjrwth_!!3105837296.jpg_760x760Q50s50.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: 'http://img.alicdn.com/imgextra/i3/3105837296/O1CN01u8yKcG23lcHFjrwth_!!3105837296.jpg_760x760Q50s50.jpg', // 用于预览显示的规格类目图片
              },
              {
                id: '2',
                name: '黑色',
                imgUrl: 'http://img.alicdn.com/imgextra/i2/3105837296/O1CN01bs5vJB23lcHLbFswm_!!3105837296.jpg_760x760Q50s50.jpg',
                previewImgUrl: 'http://img.alicdn.com/imgextra/i2/3105837296/O1CN01bs5vJB23lcHLbFswm_!!3105837296.jpg_760x760Q50s50.jpg',
              },
              {
                id: '3',
                name: '浅白色',
                imgUrl: 'http://img.alicdn.com/imgextra/i2/3105837296/O1CN01Vhp9ML23lcHJcpSg0_!!3105837296.jpg_760x760Q50s50.jpg',
                previewImgUrl: 'http://img.alicdn.com/imgextra/i2/3105837296/O1CN01Vhp9ML23lcHJcpSg0_!!3105837296.jpg_760x760Q50s50.jpg',
              }
            ],
            largeImageMode: true, //  是否展示大图模式
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
            price: 6800, // 价格（单位分）
            stock_num: 110 // 当前 sku 组合对应的库存
          },
          {
            id: 2259, // skuId
            s1: '2', // 规格类目 k_s 为 s1 的对应规格值 id
            price: 9900, // 价格（单位分）
            stock_num: 10 // 当前 sku 组合对应的库存
          },
          {
            id: 2259, // skuId
            s1: '3', // 规格类目 k_s 为 s1 的对应规格值 id
            price: 11000, // 价格（单位分）
            stock_num: 150 // 当前 sku 组合对应的库存
          }
        ],
        price: '68.00', // 默认价格（单位元）
        stock_num: 270, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: '留言', // 留言名称
            type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: '1', // 是否必填 '1' 表示必填
            placeholder: '' // 可选值，占位文本
          }
        ],
        hide_stock: false // 是否隐藏剩余库存
      },

      current: 0,
      goods: {
        picture: 'http://img.alicdn.com/imgextra/i3/3105837296/O1CN01u8yKcG23lcHFjrwth_!!3105837296.jpg_760x760Q50s50.jpg',
        images: [
          "http://img.alicdn.com/imgextra/i3/3105837296/O1CN01u8yKcG23lcHFjrwth_!!3105837296.jpg_760x760Q50s50.jpg",
          "http://img.alicdn.com/imgextra/i2/3105837296/O1CN01bs5vJB23lcHLbFswm_!!3105837296.jpg_760x760Q50s50.jpg",
          "http://img.alicdn.com/imgextra/i2/3105837296/O1CN01Vhp9ML23lcHJcpSg0_!!3105837296.jpg_760x760Q50s50.jpg"
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    onSwiperChange(index) {
      this.current = index;
    },
    onBuyClicked(e){
      this.$toast(JSON.stringify(e));
    }
  }
}
</script>

<style lang="scss" scoped>

/*轮播*/
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 5px 8px;
  font-size: 14px;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.1);
}

/*商品基本信息*/
.goods-basic {
  background: #FFFFFF;
}

/*商品详情*/
.goods-info {
  font-size: 14px;

  .goods-parameter__title {
    font-size: 16px;
    padding-bottom: 10px;
  }
}

/*商品导航按钮*/
.goods-bottom {
  height: 55px;
}
</style>